<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/myioc/iconfont.css" />
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/vue.js" type="text/javascript"></script>
    <script src="/js/axios.js" type="text/javascript"></script>
    <script src="/js/index.js"></script>
</head>
<body style="background-color:#f5f6f7">
<div id="app">
    <div  th:include="common/common-nav::head"></div>

    <div  class="blogs_body" style="display: flex;flex-direction:row;">

        <div style="width:16%;height:46%;background-color: white;border-radius: 10px">

            <div  th:include="common/common-sidebar::pal"></div>

        </div>

        <div style="width: 82%;margin-left:2%;background-color: white;border-radius: 10px;">

            <div  th:include="common/common-collect::collect"></div>

        </div>

    </div>
</div>
</body>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                searchTitle:"",
                start:0,
                total:0,
                ul_li:[
                    {ref:"/api/hello/home",val:"个人资料"},
                    {ref:"/api/hello/collect",val:"我的收藏"},
                    {ref:"/api/hello/myBlog",val:"我的博客"},
                    {ref:"/api/hello/goType",val:"分类管理"}
                ],
                blogs:[],
                collectClass:"iconfont myiocnshoucang1"
            }
        },
        methods:{
            pageChange(val){
                this.start = parseInt(val)-1
                let that = this
                axios.get("/api/hello/findByPageCollect/" + that.start).then(
                    function (resp){
                        that.blogs = resp.data.data.blogs
                        that.total = resp.data.data.total
                    }
                )
            },
            goFullText(id){
                sessionStorage.setItem("blogId",id);
                localStorage.setItem("start",this.start)
                localStorage.setItem("searchTitle",this.searchTitle)
                window.location.href="/api/public/goFullText"
            },
            findByTitle:function(){
                if(this.searchTitle==null || this.searchTitle == ""){
                    this.$notify({
                        title: '搜索不能为空',
                        type: 'warning'
                    });
                    return
                }
                sessionStorage.setItem('searchTitle',this.searchTitle)
                window.location.href = "/"
            },
            cancelCollect(item){
                let that = this;
                axios.get("/api/hello/cancelCollect/" + item.id).then(
                    function (resp){
                        let b = resp.data.data
                        if(b){
                            that.$notify({
                                title: '取消收藏',
                                type: 'success'
                            });

                            that.blogs.splice(that.blogs.indexOf(item),1)
                            that.collectClass="iconfont myiocnshoucang"
                            return
                        }
                        this.$notify.error({
                            title: '错误',
                        });
                    }
                )
            },
            init:function(){
                let that = this
                axios.get("/api/hello/findByPageCollect/" + 0).then(
                    function (resp){
                        that.blogs = resp.data.data.blogs
                        that.total = resp.data.data.total
                        console.log(resp.data.data)
                    }
                )
            },
        },
        mounted(){
            this.init()
        }
    })
</script>

<style>
    *{
        margin:0;
        padding:0;
    }
    a{
        text-decoration:none;
    }
    .el-menu--horizontal>.el-menu-item.is-active{
        border-bottom:none;
        color: #303133;
    }
    .blogs_body{
        width: 90%;
        height:600px;
        margin: 30px auto;
    }
    li{
        list-style-type:none;
        border-radius: 10px;
    }
    .li_type:hover{
        background:#f0f0f5;
    }
    .li_type:nth-child(2){
        background:#f0f0f5;
    }
    .bke h3:hover{
        color:#fc5531
    }
    .bke div i:hover{
        cursor:pointer;
    }
</style>
</html>